<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>事件</title>
		<style type="text/css">
			input{font-size:26px;margin-top: 20px;}
			body{background-image: url(img/grassland.png);}
			#mytank{position: absolute;left:10px;top:100px}
		</style>
	</head>
	<body>
		<input id="btn1" type="button" value="按钮一" />
		<input id="btn2" type="button" value="按钮二" />
		<input id="btn3" type="button" value="按钮三" />
		<hr />
		<img id="mytank" src="img/right.png"/>
		<script type="text/javascript">
			var mytank = document.getElementById('mytank');
			window.addEventListener(
				'keydown',
				function(e){
					console.log(e.keyCode);
			//179000845江沿蒙
		    //按下右键
			if(e.keyCode == 39) {
				mytank.src = "img/right.png";
				mytank.style.left = (mytank.offsetLeft+10)+'px'; 
				//设定到右边的距离
				if(mytank.offsetLeft > window.screen.width+70) {
					mytank.style.left = (window.screen.width+70)+"px";
				}
			}
			
			//按下左键
			if(e.keyCode == 37) {
				mytank.src = "img/left.png";
				mytank.style.left = (mytank.offsetLeft-10)+'px';
				//设定到左边的距离
				if(mytank.offsetLeft < 10) { 
					mytank.style.left = "10px";
				}
			}
			
			//按下下键
			if(e.keyCode == 40){
				mytank.src="img/down.png";
				mytank.style.top = (mytank.offsetTop+10)+'px';
				//设定到底部的距离
				if(mytank.offsetTop > window.screen.height-170){
					mytank.style.top = (window.screen.height-170)+"px";
				}
			}
			
			//按下上键
			if(e.keyCode == 38) {
				mytank.src = "img/up.png";
				mytank.style.top = (mytank.offsetTop-10)+'px';
				//设定到顶部的距离
				if(mytank.offsetTop < 100) {
					mytank.style.top = "100px";
				}
			}
		});	
							
			
			//单击按钮一显示弹框
			function show1() {
				alert("javascript事件测试一");
			}
			let btn1 = document.getElementById("btn1");
			btn1.onclick = show1;
			
			//双击按钮二，按钮变化
			function show2() {
				btn2.value = "按钮二测试";
			}
			let btn2 = document.getElementById("btn2");
			btn2.ondblclick = show2;
			
			//按钮三变颜色，单击显示弹框
			function show3() {
				alert("javascript事件测试三");
			}
			let btn3 = document.getElementById("btn3");
			btn3.onclick = show3;
			//来到时
			btn3.onmouseover = function() {
				btn3.style.backgroundColor = "blue";
				btn3.style.color = "white";
			} 
			//离开时
			btn3.onmouseout = function() {
				btn3.style.backgroundColor = "white";
				btn3.style.color = "black";
			}
			
			//禁用右键菜单
			document.oncontextmenu = document.body.oncontextmenu = function() {
				return false;
			}
		</script>
	</body>
</html>
